<template>
  <van-tabs v-model:active="activeTab" sticky>
    <van-tab :title="tab.name" v-for="tab in tabs" :key="tab.id">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        :immediate-check="false"
        @load="onLoad"
      >
        <ul>
          <li v-for="(item, index) in list" :key="index">
            <div class="head">
              <div class="avatar">
                <img :src="item.avatar" />
              </div>
              <div class="name">
                {{ item.userName }}
              </div>
            </div>

            <div class="content">
              <img :src="item.bgImg" />

              <div class="container">
                <div class="living">
                  {{ item.living ? '直播中' : '未开播' }} {{ visitorCount(item.visitorCount) }}W
                </div>
                <div class="intro">
                  {{ item.intro }}
                </div>

                <div class="other">
                  <div class="thumb">
                    <ul>
                      <li v-for="(thumb, index) in item.shopCarts.goods" :key="index">
                        <img :src="thumb.cover" />
                      </li>
                    </ul>
                  </div>
                  <ul class="comments">
                    <li class="comment-item" v-for="(comment, index) in item.comments" :key="index">
                      <div class="avatar">
                        <img :src="comment.avatar" />
                      </div>
                      <div class="comment-content">
                        {{ comment.content }}
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </van-list>
    </van-tab>
  </van-tabs>

  <tab-bar />
</template>

<script setup>
import { getLiveCategory, getLiveList } from '@/api/index.js'

import { ref, onMounted, watch, computed } from 'vue'

const tabs = ref([])
const activeTab = ref(0)
const page = ref(1)

const loading = ref(false)
const finished = ref(false)

const list = ref([])
const end = ref(false)

const visitorCount = (count) => {
  return (count / 10000).toFixed(1)
}

const onLoad = async () => {
  if (end.value) {
    finished.value = true
    return
  }
  loading.value = true
  page.value++
  const res = await getLiveList(tabs.value[activeTab.value].id, page.value)
  list.value.push(...res.data.lives)
  loading.value = false

  end.value = res.data.end
}

onMounted(async () => {
  //加载直播分类
  const res = await getLiveCategory()
  tabs.value = res.data.tabs.items

  // 加载第一个tab内容
  loading.value = true
  const defaultRes = await getLiveList(tabs.value[activeTab.value].id, page.value)
  list.value = defaultRes.data.lives

  console.log('onMounted defaultRes', defaultRes)
  loading.value = false
  end.value = defaultRes.data.end

  if (end.value) {
    finished.value = true
  }
})

watch(activeTab, async (newVal) => {
  list.value = []
  finished.value = false
  page.value = 1
  loading.value = true
  const res = await getLiveList(tabs.value[newVal].id, page.value)
  list.value = res.data.lives
  loading.value = false
  console.log('watch res', res)
  end.value = res.data.end
  if (end.value) {
    finished.value = true
  }
})
</script>

<style lang="scss" scoped>
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #fff;

  li {
    .head {
      position: relative;
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      height: 50px;

      .avatar {
        width: auto;
        height: auto;
        transform: translateY(30%);
        z-index: 2;
        padding-left: 10px;

        img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          border: 2px solid hsla(0, 0%, 100%, 0.9);
        }
      }

      .name {
        font-size: 14px;
        margin-left: 10px;
      }
    }

    .content {
      position: relative;
      width: 100%;
      height: auto;
      overflow: hidden;

      img {
        position: relative;
        width: 100%;
        height: 200px;
        display: block;
        object-fit: cover;
        overflow: hidden;
      }

      .container {
        box-sizing: border-box;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 10px;
        // border: 1px solid #eee;
        color: #fff;

        .living {
        }

        .intro {
        }

        .other {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          height: 50px;
          gap: 20px;
          width: calc(100vw - 20px);

          .thumb {
            width: auto;

            ul {
              display: flex;
              gap: 5px;
              width: auto;
              overflow: hidden;
              background-color: transparent;

              li {
                overflow: hidden;
                width: auto;

                img {
                  width: 50px;
                  height: 50px;
                  display: block;
                }
              }
            }
          }

          .comments {
            display: flex;
            flex-direction: column;
            gap: 5px;
            background-color: transparent;
            width: 100%;
            margin-left: auto;

            .comment-item {
              display: flex;
              align-items: center;
              justify-content: flex-start;
              min-width: 0;

              .avatar {
                img {
                  width: 14px;
                  height: 14px;
                  border-radius: 50%;
                }
              }

              .comment-content {
                font-size: 11px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                flex: 1;
                max-width: 170px;
                padding-right: 10px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
